<template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearchForm">
      <el-col :span="8" :xs="24" v-show="$permiss[597]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.systemUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')">
          <el-input v-model="page.userName"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')">
          <el-input v-model="page.userPhone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('邮箱')">
          <el-input v-model="page.email"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('处理状态')">
          <el-select v-model="page.status" clearable style="width: 100%;">
            <el-option :value="0" :label="$t('未处理')"></el-option>
            <el-option :value="1" :label="$t('已处理')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[598]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('反馈时间')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              type="daterange"
              unlink-panels
              range-separator="~"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <Table :table-data="tableData" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
             :page="page" :loading="loading">
        <el-table-column prop="systemUserName" :label="$t('所属租户')" align="center" v-if="$permiss[597]"/>
        <el-table-column prop="userName" :label="$t('用户姓名')" align="center" min-width="120"/>
        <el-table-column prop="userPhone" :label="$t('手机号码')" align="center" min-width="120">
          <template slot-scope="{row}">
            <el-link :href="'sip:' + row.userPhone + ',' + new Date().getTime()" :underline="false" type="primary">
              {{ "*****" + row.userPhone.substr(5, row.userPhone.length) }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="eMali" :label="$t('邮箱')" align="center" min-width="150"/>
        <el-table-column prop="appName" :label="$t('所属APP')" align="center"/>
        <el-table-column prop="content" :label="$t('反馈内容')" align="center"
                         width="300">
          <template slot-scope="{row}">
            <el-tooltip :content="row.content">
              <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ">{{ row.content }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :label="$t('图片')" align="center" width="150">
          <template slot-scope="{row}">
            <el-image v-if="row.imgUrl" style="height: 80px" :src="row.imgUrl" :preview-src-list="[row.imgUrl]"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('反馈时间')" align="center" width="150"/>
        <el-table-column prop="status" :label="$t('处理状态')" align="center">
          <template slot-scope="{row}">
            {{ row.status === 0 ? $t('未处理') : $t('已处理') }}
          </template>
        </el-table-column>
        <el-table-column prop="processUserName" :label="$t('处理人')" align="center" min-width="100"/>
        <el-table-column prop="processTime" :label="$t('处理时间')" align="center" width="150"/>
        <el-table-column prop="remarks" :label="$t('备注')" align="center" min-width="150"/>
        <el-table-column :label="$t('操作')" align="center" v-if="$permiss[225]" fixed="right">
          <template slot-scope="{row}">
            <el-button v-show="$permiss[225]" type="text" @click="lookDetails(row)">{{ $t('查看详情') }}</el-button>
          </template>
        </el-table-column>
      </Table>
    </el-card>
    <Dialog :visible.sync="visible" :title="$t('查看详情')" @cancel="visible = false" @close="visibleClose"
            @confirm="visibleConfirm">
      <el-form label-width="80px">
        <el-form-item :label="$t('用户姓名')">
          <div style="line-height: 32px">
            {{ tableRows.userName }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('手机号码')">
          <div style="line-height: 32px">
            {{
              tableRows.userPhone ? "*****" + tableRows.userPhone.substr(5, tableRows.userPhone.length) : tableRows.userPhone
            }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('邮箱')">
          <div style="line-height: 32px">
            {{ tableRows.eMali }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('所属APP')">
          <div style="line-height: 32px">
            {{ tableRows.productName }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('所属租户')" v-show="$permiss[597]">
          <div style="line-height: 32px">
            {{ tableRows.systemUserName }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('反馈内容')">
          <div style="line-height: 32px">
            {{ tableRows.content }}
          </div>
        </el-form-item>
        <el-form-item v-if="tableRows.imgUrl" :label="$t('图片')">
          <el-image style="height: 150px;width: 200px" :src="tableRows.imgUrl"
                    :preview-src-list="[tableRows.imgUrl]"></el-image>
        </el-form-item>
        <el-form-item :label="$t('反馈时间')">
          <div style="line-height: 32px">
            {{ tableRows.createTime }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('备注')">
          <el-input type="textarea" :rows="4" v-model="tableRows.remarks"/>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import {dateFormatSection, deepClone, defaultTimeDate} from "@/utils/tools";
import {selectProduct, selectTenant} from "@/api/system";
import {userFeedbackList,updateRemarks} from '@/api/system'
export default {
  name: 'userFeedback',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        status: 0,
        timeValue: defaultTimeDate(14)
      },
      tenantList: [],
      tableData: [],
      productList: [],
      tableRows: {},
      visible: false,
      loading: false
    }
  },
  mounted() {
    this.getTableData()
    this.getSelect()
  },
  methods: {
    getSelect() {
      selectTenant().then(res => {
        this.tenantList = res.data
      })
      selectProduct().then(res => {
        this.productList = res.data
      })
    },
    async getTableData() {
      const [startTime, endTime] = dateFormatSection(this.page.timeValue || [])
      this.loading = true
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue
      const res = await userFeedbackList(params)
      if (res.code === 1) {
        const {list,total} = res.data
        this.tableData = list
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
      } else {
        this.loading = false
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    resetSearchForm() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    lookDetails(row) {
      this.tableRows = deepClone(row)
      this.visible = true
    },
    async visibleConfirm() {
      const {id, remarks} = this.tableRows
      const res = await updateRemarks({
        id,
        remarks
      })
      if (res.code === 1) {
        this.$message.success(this.$t('修改成功'))
        this.visibleClose()
        this.visible = false
        this.getTableData()
      }
    },
    visibleClose() {
      this.tableRows = {}
    }
  }
}
</script>

<style scoped>

</style>
